<template>
  <div class="container">
    <router-view/>
    <div class="header">
      <div class="title"><label>返回</label></div>
      <div class="title"><span>首页</span></div>
      <div class="title"><label>设置</label></div>
    </div>
    <div class="top">
      <div class="arrears">
        <div id="buttonUp">
            <a style="margin: auto" @click="gotoArrearage">
              <span><img slot="icon" src="@/assets/images/qianfei.png"></span>
              <span style="color:white; font-size: 20px;">欠费提醒</span>
              <span style="color:white; border-radius: 12px;background-color: red; padding: 2px 8px; width: 30px;">22</span>
            </a>
        </div>
      </div>
      <div class="browse">
        <div class="task">

            <el-button id="buttonLeft">
              <div style="color: white; font-size: 30px;"><h>0</h></div>
              <br>
              <span>今日订单</span>
            </el-button>

        </div>
        <div class="task">
          <el-button id="buttonReight">
            <div style="color: white; font-size: 30px;"><h>0</h></div>
            <br>
            <span>今日完成额</span>
          </el-button>
        </div>
      </div>
    </div>
    <div class="centre">
      <router-link to='/entry'>
        <a >
          <img slot="icon" src="@/assets/images/luru.png">
          <br>
          <span>订单录入</span>
        </a>
      </router-link>
      <router-link to='/inquire'>
        <img src="@/assets/images/chaxun.png"><br>
        <span>订单查询</span>
      </router-link>
      <router-link to='/manage'>
        <img src="@/assets/images/guanli.png"><br>
        <span>患者管理</span>
      </router-link>
      <router-link to='/recharge'>
        <img src="@/assets/images/chongzhi.png"><br>
        <span>患者充值</span>
      </router-link>
    </div>
    <div class="bottom">
      <ul>
        <li>
          <el-button class="button-li">按摩-160元</el-button> <span>边姨</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">艾灸-80元</el-button> <span>韩凌云</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">针灸-125元</el-button> <span>王爱彤</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">艾灸-80元</el-button> <span>王爱彤</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">按摩-160元</el-button> <span>边姨</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">按摩-80元</el-button> <span>胡若瑜</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">艾灸-80元</el-button> <span>韩凌云</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">按摩-80元</el-button> <span>胡若瑜</span><span class="right">2021-01-01</span>
        </li>
        <li>
          <el-button class="button-li">艾灸-80元</el-button> <span>韩凌云</span><span class="right">2021-01-01</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
  .container{
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction:column;
  }
  .header{
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    text-align: center;
    background-color: #00afff;
    color: white;
  }
  .header div{
    width: 20%;
    margin-top: auto;
    margin-bottom: auto;
  }
  .top{
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    text-align: center;
  }
  .arrears{
    width: 90%;
    height: 130px;
    display: flex;
    flex-direction: row;
    margin: auto;
  }
  .arrears  #buttonUp{
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    border-radius:10px;
    background: linear-gradient(to bottom, #ffe95e, #ff7f67);
    display: flex;
    flex-direction: column;
  }
  .arrears  #buttonUp a{
    display: flex;
    align-items: center;
  }
  .browse{
    width: 90%;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    margin: auto;
  }
  .browse .task{
    width: 45%;
    height: 100%;
  }

  .browse .task #buttonLeft{
    width: 100%;
    height: 100%;
    border-radius:10px;
    background: linear-gradient(to bottom, #16e8f6, #5583ee);
    color: white;
  }
  .browse .task #buttonReight{
    width: 100%;
    height: 100%;
    border-radius:10px;
    background: linear-gradient(to bottom, #33f687, #1caf8e);
    color: white;
  }
  .centre{
    width: 90%;
    height: 90px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    text-align: center;
    margin: auto;
  }

  img{
    width: 40px;
    height: 40px;
  }



  .bottom{
    width: 90%;
    height: 400px;
    margin: auto;
  }

  .bottom ul{
    list-style-type: none;
    margin:10px ;
    padding: 0;
  }
  .bottom ul li{
    text-align: left;
    border-top: 1px solid #eee;
  }
  .bottom ul li .button-li{
    color: #fff;
    background-color: #26a2ff;
    margin-top: 10px;
  }
  .right{
    font-size: .9rem;
    color: #a8a8a8;
    float: right;
    margin-top: 17px;
  }
</style>



<script>
  export default {
    name: 'index',
    data() {
      return {}
    },
    methods:{
      gotoArrearage(){
        this.$router.push("/arrearage");
      },
    }

  }
</script>


